"use client"

import { CalendarEvent, getDayClassName, getEventsForDay } from "@/lib/calendar"
import { format } from "date-fns"

interface CalendarGridProps {
  days: Date[]
  currentMonth: Date
  selectedDate: Date | null
  events: CalendarEvent[]
  onSelectDate: (date: Date) => void
}

export function CalendarGrid({ 
  days, 
  currentMonth, 
  selectedDate, 
  events, 
  onSelectDate 
}: CalendarGridProps) {
  const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

  return (
    <div className="calendar-container">
      <div className="grid grid-cols-7 gap-1 p-4 bg-muted/20">
        {weekDays.map((day) => (
          <div key={day} className="text-center font-medium text-muted-foreground">
            {day}
          </div>
        ))}
      </div>
      <div className="calendar-grid">
        {days.map((day) => {
          const dayEvents = getEventsForDay(events, day)
          return (
            <div
              key={day.toString()}
              className={getDayClassName(day, currentMonth, selectedDate)}
              onClick={() => onSelectDate(day)}
            >
              <div className="relative w-full h-full p-1">
                <span className="text-sm">{format(day, "d")}</span>
                <div className="mt-1 space-y-1 max-h-20 overflow-hidden">
                  {dayEvents.slice(0, 2).map((event) => (
                    <div
                      key={event.id}
                      className={`calendar-event ${event.color || "bg-primary"} text-white`}
                      title={event.title}
                    >
                      {event.title}
                    </div>
                  ))}
                  {dayEvents.length > 2 && (
                    <div className="text-xs text-muted-foreground text-center">
                      +{dayEvents.length - 2} more
                    </div>
                  )}
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}